<template>
  <div class="chart-bar" ref="chartBar" />
</template>

<script>
import * as echarts from "echarts/core";
import { ToolboxComponent, TooltipComponent, GridComponent, LegendComponent } from "echarts/components";
import { BarChart, LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  BarChart,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
]);

let myChart;
let unit = {
  社会化服务组织: "家",
  农机总动力: "万千瓦",
  需求量: "万吨",
  供应量: "万吨",
};
export default {
  props: {
    axisLineShow: {
      //隐藏y轴刻度线和数值
      type: Boolean,
      default: false,
    },
    yAxisShow: {
      type: Boolean,
      default: true,
    },
    colors: {
      type: Array,
      default: () => ["#107ff1", "#7ffefe", "#de851b"],
    },
    legendData: {
      type: Array,
      default: () => [],
    },
    xData: {
      type: Array,
      default: () => [],
    },
    series: {
      type: Array,
      default: () => [],
    },
    // 文字倾斜度
    rotate: {
      type: Number,
      default: 0,
    },
    yaxisName: {
      type: String,
      default: "",
    },
    yaxisName2: {
      type: String,
      default: "",
    },
  },
  computed: {
    isCounty() {
      return JSON.parse(this.$store.getters.areaIds).length === 3 ? true : false;
    },
  },
  watch: {
    series: {
      handler() {
        // this.updateOption();
        this.init();
      },
      deep: true,
    },
    rotate: {
      handler() {
        this.init();
      },
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      const chartDom = this.$refs.chartBar;
      // if (myChart != null && myChart != "" && myChart != undefined) myChart.dispose();
      myChart = echarts.init(chartDom);
      myChart.setOption({
        color: this.colors,
        tooltip: {
          textStyle: {
            //   fontSize: 18, //字体大小
            color: "#ffffff", //字体颜色
          },
          borderColor: "#3C98FF",
          borderWidth: 1,
          backgroundColor: "rgba(60, 152, 255, 0.8)", //通过设置rgba调节背景颜色与透明度
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        grid: {
          left:"13%"
        },
        toolbox: {
          feature: {
            dataView: { show: false, readOnly: false },
            //   restore: { show: true },
            //   saveAsImage: { show: true },
          },
        },
        legend: {
          data: this.legendData || [], //["完成数", "目标数", "完成率"]
          top: "10%",
          itemWidth: 10,
          itemHeight: 10,
          formatter: (name) => {
            // return name + " " + unit[name];
            if (name === "社会化服务组织") return name + " " + "(家)";
            if (name === "农机总动力") return name + " " + "(万千瓦)";
            if (name === "需求量" || name === "供应量") {
              if (this.isCounty) {
                return name + " " + "(吨)";
              }
              return name + " " + "(万吨)";
            }
            return name;
          },
          textStyle: {
            color: "#fff",
          },
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
              show: false,
            },
            axisLabel: {
              // interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
              rotate: this.rotate, //调整数值改变倾斜的幅度（范围-90到90）
              color: "#fff",
            },
            data: this.xData,
          },
        ],
        yAxis: [
          {
            show: this.yAxisShow,
            type: "value",
            name: this.yaxisName || "",
            /* axisTick: {
              show: false,
            }, */
            min: 0,
            // max: 250,
            offset: 0,
            position: "left",
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#C5C5C5",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            type: "value",
            name: "",
            min: 0,
            // max: 250,
            position: "right",
            splitLine: {
              show: false,
            },
            offset: 50,
            axisLine: {
              show: true,
              lineStyle: {
                color: this.colors[1],
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
          {
            type: "value",
            name: this.yaxisName2 || "",
            min: 0,
            //   max: 25,
            position: "right",
            splitLine: {
              show: false,
            },
            axisLine: {
              show: this.axisLineShow,
              lineStyle: {
                color: "#C5C5C5",
              },
            },
            axisLabel: {
              formatter: "{value}",
            },
          },
        ],
        series: this.series,
      });
    },
    updateOption() {},
  },
};
</script>

<style scoped>
.chart-bar {
  width: 100%;
  height: 240px;
}
</style>
